<template>
  <div>
    <div class="rulepopup">
      <van-popup :show="excitingStatus"
                 :close-on-click-overlay="false">
        <div class="hint">
          <div class="myTitle">用户登录</div>
          <div class="shuytimg">
            <!-- <van-icon name="close"
                      @click="shutClick" /> -->
          </div>
          <!-- 请输入手机号 -->
          <div v-if="loginStatus">
            <div class="inputbox">
              <input type="text"
                     v-model="phone"
                     class="phone-input"
                     placeholder="请输入移动手机号">
              <div class="yzm-box">
                <input type="text"
                       class="yzm-input"
                       v-model="yzmCode"
                       placeholder="请输入验证码">
                <div class="yzm-text"
                     @click="getYzm">{{valiBtn}}</div>
              </div>

            </div>
            <div class="loginbox"
                 @click="loginClick">登录</div>
          </div>
          <!-- 登录 -->
          <div class="onekey-login"
               v-if="loginStatus"
               @click="onekeyLogin">本机号码一键登录</div>
          <div class="onekey-login bacbor"
               v-if="loginStatus === false"
               @click="onekeyLogin">本机号码一键登录</div>
          <div class="onekey-login"
               v-if="loginStatus === false"
               @click="showYzmLogin">短信验证码登录</div>
          <div class="retucont">
            <div>3G/4G环境下建议选择一键登录</div>
            <div>Wi-Fi环境下请选择短信登录</div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant';
// import userApi from '../../api/mobile/user'
import userApi from '@/api/mobile_user/index'

export default {
  props: {
    // 弹窗
    excitingStatus: {
      type: Boolean,
      default: false
    },
    // 是否验证码登录
    loginStatus: {
      type: Boolean,
      default: false
    },
    // 获取验证码文本
    // valiBtn: {
    //   type: String,
    //   default: '获取验证码'
    //   // required:false定义参数是否必须值
    // },
    // // 手机号
    // phone: {
    //   type: String,
    //   default: ''
    //   // required:false定义参数是否必须值
    // },
    // // 获取验证码
    // yzmCode: {
    //   type: String,
    //   default: ''
    //   // required:false定义参数是否必须值
    // },
  },
  data () {
    return {
      // excitingStatus: true,
      // loginStatus: false,
      valiBtn: "获取验证码",
      phone: '',
      yzmCode: '',
    }
  },
  methods: {
    shutClick () {
      // this.excitingStatus = false
      this.$emit('shutClick')
    },
    showYzmLogin () {
      this.$emit('showYzmLogin')
    },
    onekeyLogin () {
      this.$emit('onekeyLogin')
    },
    loginClick () {
      this.$emit('loginClick', this.phone, this.yzmCode)
      console.log('登录');
    },
    // 获取验证码
    getYzm () {
      console.log('获取验证码');
      if (this.phone)
      {
        if (this.valiBtn === "获取验证码")
        {
          let req = {
            phone: this.phone
          }
          userApi.sendCode(req).then(res => {
            console.log(res, 'this.phone');
            if (res.retCode == 0)
            {
              // 倒计时
              this.tackBtn();
              Toast("发送验证码成功");
            }
            if (res.publicData.retInfo.retCode == 600100018)
            {
              Toast("验证码五分钟内有效");
            }
          })
        }
      } else
      {
        Toast('请输入手机号');
      }


    },
    // 验证码倒计时
    tackBtn () {
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0)
        {
          clearInterval(timer);
          this.valiBtn = "获取验证码";
        } else
        {
          this.valiBtn = time + "秒后重试";
          time--;
        }
      }, 1000);
    },
  }

}
</script>

<style lang="scss" scoped>
.rulepopup {
  position: relative;
  ::v-deep .van-popup {
    width: 85.333vw;
    border-radius: 2.667vw;
    background: #fff;
  }
  .hint {
    position: relative;
    .myTitle {
      font-size: 4.8vw;
      font-weight: 500;
      color: #000000;
      line-height: 6.4vw;
      text-align: center;
      padding: 8vw 6.4vw;
    }
    .shuytimg {
      position: absolute;
      top: 4vw;
      right: 4vw;
      font-size: 5.867vw;
      color: rgba(0, 0, 0, 0.3);
    }
    .inputbox {
      width: 100%;
      margin-top: -2.667vw;
      text-align: center;
      // 输入框
      .phone-input {
        width: 72.533vw;
        height: 10.667vw;
        line-height: 10.667vw;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5.333vw;
        text-indent: 5.333vw;
        color: rgba(0, 0, 0, 0.5);
        border: #ccc 1px solid;
      }
      .yzm-box {
        display: flex;
        justify-content: space-between;
        padding: 4vw 6.667vw;
        .yzm-input {
          width: 41.867vw;
          height: 10.667vw;
          background: rgba(0, 0, 0, 0.1);
          border-radius: 5.333vw;
          text-indent: 5.333vw;
          color: rgba(0, 0, 0, 0.5);
          border: #ccc 1px solid;
        }
        .yzm-text {
          width: 28vw;
          height: 10.667vw;
          line-height: 10.667vw;
          border-radius: 5.333vw;
          border: 0.267vw solid #f1442f;
          font-size: 4vw;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #f1442f;
        }
      }
    }
    // 按钮
    .loginbox {
      width: 72.533vw;
      height: 10.667vw;
      margin: 0 0 4vw 6.667vw;
      letter-spacing: 2.133vw;
      line-height: 10.667vw;
      text-align: center;
      background: #f1442f;
      border-radius: 5.333vw;
      color: #fff;
    }
    .onekey-login {
      width: 72.533vw;
      height: 10.667vw;
      margin: 0 0 4vw 6.667vw;
      letter-spacing: 0.267vw;
      line-height: 10.667vw;
      text-align: center;
      background: #fff;
      border-radius: 5.333vw;
      border: 0.267vw solid #f1442f;
      color: #f1442f;
    }
    .bacbor {
      width: 72.533vw;
      height: 10.667vw;
      margin: 0 0 4vw 6.667vw;
      letter-spacing: 0.267vw;
      line-height: 10.667vw;
      text-align: center;
      background: #f1442f;
      border-radius: 5.333vw;
      // border: 0.267vw solid #f1442f;
      color: #fff;
    }
    .retucont {
      width: 100%;
      padding: 1.333vw 6.667vw 8vw 6.667vw;
      text-align: center;
      div {
        line-height: 5.867vw;
        font-size: 3.733vw;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>